<template>
  <div class="alarmLevel-root">
    <formTitleVue
      title="监测预警综合统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <div class="main">
      <div class="flex">
        <div class="flex-li">
          <img class="left" src="@/assets/alarm/1012.png" alt="">
          <div class="right">
            <div class="line">累计今年预警数</div>
            <div class="line num num1">{{warningData.thisYearTotal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.thisYearTotal" :compareNum="warningData.lastYearTotal"/></div>
          </div>
        </div>
        <div class="flex-li">
          <img class="left" src="@/assets/alarm/1011.png" alt="">
          <div class="right">
            <div class="line">已处置预警数</div>
            <div class="line num num2">{{warningData.thisYearDeal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.thisYearDeal" :compareNum="warningData.lastYearDeal"/></div>
          </div>
        </div>
        <div class="flex-li">
          <img class="left" src="@/assets/alarm/1010.png" alt="">
          <div class="right">
            <div class="line">未处置预警数</div>
            <div class="line num num3">{{warningData.thisYearUndeal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.thisYearUndeal" :compareNum="warningData.lastYearUndeal"/></div>
          </div>
        </div>
      </div>
      <div class="flex content2">
        <div class="flex-li">
          <div class="right">
            <div class="line">第一季度</div>
            <div class="line num num1">{{warningData.oneQuarterTotal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.oneQuarterTotal" :compareNum="warningData.lastOneQuarterTotal"/></div>
          </div>
        </div>
        <div class="flex-li">
          <div class="right">
            <div class="line">第二季度</div>
            <div class="line num num1">{{warningData.twoQuarterTotal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.twoQuarterTotal" :compareNum="warningData.lastTwoQuarterTotal"/></div>
          </div>
        </div>
        <div class="flex-li">
          <div class="right">
            <div class="line">第三季度</div>
            <div class="line num num1">{{warningData.threeQuarterTotal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.threeQuarterTotal" :compareNum="warningData.lastThreeQuarterTotal"/></div>
          </div>
        </div>
        <div class="flex-li">
          <div class="right">
            <div class="line">第四季度</div>
            <div class="line num num1">{{warningData.fourQuarterTotal}}</div>
            <div class="line line-bootom">同比去年<compareIcon :nowNum="warningData.fourQuarterTotal" :compareNum="warningData.lastFourQuarterTotal"/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import {time_select_optios} from '@/utils/global.js';
import {zhongheStatistics} from "@/api/alarm/statistics";
import compareIcon from '@/components/compareIcon/compareIcon.vue'

export default {
  name: "alarmBclassify",
  components: {
    formTitleVue,compareIcon,
  },
  props: {
    alarmTypeOptions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      selectOptions: [
        // {
        //   selectValue: "",
        //   options: this.alarmTypeOptions,
        //   changeFn: this.selectChange3,
        // },
        // {
        //   selectValue: "近一月",
        //   options: [
        //     {label: "近一月", value: "近一月"},
        //     {label: "近半年", value: "近半年"},
        //     {label: "近一年", value: "近一年"},
        //   ],
        //   changeFn:this.selectChange
        // }
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "在建工地","人密区域"],
        yData: [],
      },
      echartsOption: {},
      searChForm: {
        startTime: '',
        endTime: '',
        modeType:"",
      },
      warningData: {
        "thisYearTotal": 0,
        "lastYearTotal": 0,
        "thisYearUndeal": 0,
        "lastYearUndeal": 0,
        "thisYearDeal": 0,
        "lastYearDeal": 0,
        "oneQuarterTotal": 0,
        "lastOneQuarterTotal": 0,
        "twoQuarterTotal": 0,
        "lastTwoQuarterTotal": 0,
        "threeQuarterTotal": 0,
        "lastThreeQuarterTotal": 0,
        "fourQuarterTotal": 0,
        "lastFourQuarterTotal": 0,
      },
    };
  },
  methods: {
    selectChange3(item){
      this.searChForm.modeType = item
      this.search()
    },
    selectChange(item) {
      // this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
      // this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
      this.search()
    },
    search() {
      this.fetch({
        ...this.searChForm,
      })
    },
    fetch(params = {}) {
      params.areaCode = this.$store.state.account.user.deptIds;
      zhongheStatistics(params).then(res => {
        if (res.code == 200) {
          this.warningData = res.data
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      }).finally(final => {
        console.log("error")
      })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[1]?.selectValue)
  },
};
</script>

<style lang="scss" scoped>
.alarmLevel-root {
  #echarts-alarmLevel {
    height: 30vh;
  }
  .main{
    padding: 20px;
    .flex{
      display: flex;
      justify-content: space-between;
      .flex-li{
        display: flex;
        align-items: center;
        .left{
          width: 60px;
          height: 60px;
          margin-right: 20px;
        }
        .right{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: center;
          font-size: 16px;
          .line{
            margin-top: 6px;
          }
          .line-bootom{
            display: flex;
            margin-top: 10px;
            white-space: nowrap;
          }
          .num{
            font-size: 28px;
            line-height: 28px;
            color: #6972F3;
            font-weight: bold;
          }
          .num2{
            color: #95A3C6;
          }
          .num3{
            color: #FE6B69;
          }
        }
      }
    }
    .content2{
      margin-top: 30px;
      padding: 20px;
      background-image: linear-gradient(#E4F2FF,#EFF7FF 50%,#F4F9FF 70%,#fff);
      justify-content: center;
      .flex-li{
        border-right: 1px solid #D8DFE5;
        padding: 0 20px;
        &:last-child{
          border-right: none;
        }
      }
    }
  }
}
</style>
